<template>
    <div class="home_page">
        <!-- 左导航 -->
        <aside>
            <vsidder></vsidder>
        </aside>
        <!-- 右主体 -->
        <section class="wrapper">
            <vheader></vheader>
            <vue-tabs></vue-tabs>
            <vfooter></vfooter>
        </section>
    </div>
</template>
<script>
import vheader from '@comp/Header/header.vue'
import vsidder from '@comp/SideNav/sidder.vue'
import vfooter from '@comp/Footer/footer.vue'
export default {
    components: {
        vheader,
        vsidder,
        vfooter
    },
    mounted() {
        this.$taber.open('main')
    },
}
</script>
<style lang="less">
.home_page {
    width: 100%;
    height: 100%;
    background-color: #e8f2f7;
    overflow: hidden;
    display: flex;
    font-size: 14px;

    aside {
        width: 130px;
        height: 100%;
    }

    .wrapper {
        flex: 1;
        height: 100%;
        position: relative;
        min-width: 550px;
        overflow-x: hidden;
    }

    .vfooter {
        height: 40px;
        line-height: 40px;
    }

    .vue-tabs {
        width: 100%;
        position: absolute;
        top: 60px;
        bottom: 40px;
        overflow: hidden;

        .tabs-list li {
            color: #676764;
        }

        .tabs-list>li.active:after {
            background-color: #309cfc;
        }

        .tabs-content-wrapper {
            height: calc(100% - 5%);
        }
    }
}
</style>